<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-07 10:24:07
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-08-06 14:41:04
 * @FilePath: \website-reconstruction---vue\src\components\sections\home\AboutSection.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getContactVolist } from '@/api/xyybackend/getVoList.js'
import { DataProp } from '@/types/selfdefine/Layout'
import { useLangStore } from '@/stores/langStore'
import { storeToRefs } from 'pinia'
const { tipsButton, currentLang } = storeToRefs(useLangStore())
const props = defineProps<{
  dataInfo: DataProp | undefined
}>()
const contactList = ref()
onMounted(async () => {
  const parms = { ids: [31, 32], lang: 'en' }
  const res = await getContactVolist(parms)
  if ((window as any).WOW) {
    new (window as any).WOW().init()
  }
  contactList.value = res.rows
  // 这里可以添加从数据库或API获取数据的逻辑
  // fetchDataFromServer().then(data => {
  //   sectionData.value = data;
  // });
})

// 在 script 中
const contactLabels = computed(() => {
  const isZh = currentLang.value === 'zh'
  return {
    title: isZh ? '联系我们' : 'Contact Us',
    name: isZh ? '联系人' : 'Contact',
    phone: isZh ? '联系电话' : 'Phone',
    email: isZh ? '电子邮箱' : 'Email',
  }
})

// 【推荐】返回完整的翻译后联系人列表
const translatedContactList = computed(() => {
  const isZh = currentLang.value === 'zh'
  return contactList.value.map((contact) => ({
    ...contact,
    displayName: isZh ? contact.name : contact.nameTranslate || contact.name,
  }))
})
</script>

<template>
  <section
    class="section-padding aboutus-section bg-light-white wow fadeInLeft"
    data-wow-delay="0.2s"
  >
    <div class="container" v-if="dataInfo.partTitle">
      <div class="row">
        <!-- 左侧关于我们内容 -->
        <div class="col-lg-6 col-md-12 mt-3 wow fadeInLeft">
          <div class="aboutus">
            <h2 class="aboutus-title">
              {{ dataInfo.partTitle.slice(0, 2) }}
              <span class="text-custom-blue">
                {{ dataInfo.partTitle.slice(2) }}
              </span>
            </h2>
            <template v-for="(item, index) in dataInfo.partContentVoList">
              <p class="aboutus-text" v-if="!item.imageUrl">
                {{ item.content }}
              </p>
            </template>

            <a class="aboutus-more" href="#">{{ tipsButton }}</a>
          </div>
        </div>

        <!-- 右侧图片和联系方式 -->
        <div class="col-lg-6 mt-3 wow fadeInRight">
          <div class="about-container d-flex flex-column align-items-center">
            <div class="about-img">
              <img
                :src="dataInfo.partContentVoList[0].imageUrl"
                class="full-width"
                alt="关于我们图片"
              />
            </div>

            <!-- 联系方式部分 -->
            <div class="contact-info mt-3 text-center" v-if="contactList">
              <h5>{{ contactLabels.title }}</h5>
              <p>
                {{ contactLabels.name }}:
                {{ translatedContactList[0].displayName }}/{{
                  translatedContactList[1].displayName
                }}
              </p>
              <p>
                {{ contactLabels.phone }}:
                {{ translatedContactList[0].phone }}/{{
                  translatedContactList[1].phone
                }}
              </p>
              <p>
                {{ contactLabels.email }}:
                {{ translatedContactList[0].email }}/{{
                  translatedContactList[1].email
                }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
